<template>
	<view>
		<view class="bg" v-show="isShow" @click="hideToast">
		</view>
		<view class="top">
			<image class="image" src="../../../../static/image/banner.png" mode=""></image>
			<view class="tip">
				<image src="../../../../static/image/zhuyi-3@2x(1).png" mode=""></image>
				<view class="text">
					收件人后面的字母和数字是您的唯一标识，快递单务必填写！
				</view>
			</view>
		</view>
		<view class="middle">
			<view class="item">
				<view class="label">
					收件人
				</view>
				<view class="text">
					{{idCard}}
				</view>
				<view class="clone">
					<view class="" @click="clone(idCard)">
						复制
					</view>
					<view class="border">
					</view>
				</view>
			</view>
			<view class="item">
				<view class="label">
					收件电话
				</view>
				<view class="text">
					{{addressList.tel}}
				</view>
				<view class="clone">
					<view class=""  @click="clone(addressList.tel)">
						复制
					</view>
					<view class="border">
					</view>
				</view>
			</view>
			<view class="item">
				<view class="label">
					详细地址
				</view>
				<view class="text">
					{{address}}
				</view>
				<view class="clone">
					<view class="" @click="clone(address)">
						复制
					</view>
					<view class="border">
					</view>
				</view>
			</view>
		</view>
		<view class="btn" @click="cloneAll">
			<button>一键复制本仓库</button>
		</view>
		<view class="toast" v-show="isShow">
				<view class="image">
					<image src="../../../../static/image/tishi@2x(1).png" mode=""></image>
				</view>
				<view class="text1">
					内容已复制成功，请尽快去 粘贴以防丢失哦！
				</view>
				<view class="sure" @click="hideToast">
					<button>确定</button>
				</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				addressList:{},
				isShow:false,
				userInfo:uni.getStorageSync("userInfo")
			}
		},
		computed:{
			idCard(){
				return "鑫达阿俊"+this.addressList.member_code
			},
			address(){
				return `${this.addressList.address}(${this.userInfo.nickname})`
			},
			copyAll(){
				return `收件人:鑫达阿俊${this.addressList.member_code} 收件电话:${this.addressList.tel} 详细地址:${this.address}`
			}
		},
		async created() {
			this.addressList=await this.getAddressData()
			console.log(this.addressList)
			console.log(this.userInfo)
		},
		methods: {
			async getAddressData(){
				let token=uni.getStorageSync("token")
				const {data}=await this.$http({
					url:"mis/warehouse",
					header:{
						"token":token
					}
				})
				return data.data
			},
			clone(data){
				console.log(data)
				uni.setClipboardData({
					data:data,
					success:()=> {
						uni.hideToast()
						this.isShow=true
					}
				})	
			},
			cloneAll(){
				console.log(this.copyAll)
				uni.setClipboardData({
					data:this.copyAll,
					success:()=> {
						uni.hideToast()
						this.isShow=true
					}
				})
			},
			hideToast(){
				this.isShow=false
			}
		}
	}
</script>

<style scoped>
.top{
	position: relative;
}
.top .image{
	height: 300rpx;
	width: 100%;
}
.tip{
	position: absolute;
	bottom:0;
	z-index: 2;
	width: 100%;
	height: 50rpx;
	background: #F7CC46;
	display: flex;
	align-items: center;
	justify-content: center;
}
.tip image{
	width: 26rpx;
	height: 26rpx;
	vertical-align: bottom;
}
.tip .text{
	font-size: 23rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #FFFFFF;
	margin-left: 20rpx;
}
.middle{
	padding: 0 20rpx;
}
.middle .item{
	display: flex;
}
.middle .item .label{
	width: 150rpx;
	font-size: 26rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #999999;
	padding-left: 30rpx;
}
.middle .item .text{
	font-size: 26prx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #333333;
	margin-left: 60rpx;
	width: 400rpx;
}
.item{
	position: relative;
	display: flex;
	align-items: center;
	line-height: 70rpx;
	padding: 20rpx;
	border-bottom: 1rpx solid rgba(151,151,151,0.2);
}
.clone{
	position: absolute;
	right: 0;
	font-size: 26rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #F7CC46;
}
.border{
	position: absolute;
	left:-20rpx;
	top: 50%;
	transform: translate(0,-50%);
	width: 1rpx;
	background-color: rgba(151,151,151,0.2);
	height: 30rpx;
}
.btn{
	margin-top: 40rpx;
}
.btn button{
	width: 690rpx;
	height: 80rpx;
	background: #F7CC46;
	border-radius: 40rpx;
	font-size: 32rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #FDFBFB;
}
.bg{
	position: fixed;
	background: #000000;
	z-index: 9000;
	width: 100%;
	height: 100%;
	opacity: 0.5;
}
.toast{
	position: fixed;
	z-index: 9999;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 520rpx;
	height: 381rpx;
	background: #FFFFFF;
	border-radius: 20rpx;
	text-align: center;
}
.toast .image{
	margin:30rpx 0;
}
.toast .image image{
	height: 95rpx;
	width: 72rpx;
}
.toast .text1{
	width: 357rpx;
	margin: 0 auto;
	margin-bottom:30rpx ;
}
.toast .sure{
	
}
.toast .sure button{
	width: 240rpx;
	height: 80rpx;
	background: #F7CC46;
	border-radius: 40rpx;
	font-size: 32rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #FDFBFB;
}
</style>
